<template>
  <div class="box">
    <!-- 顶部 -->
    <van-nav-bar
    title="修改密码"
     @click-left="$router.back()">
      <template #left>
        <img class="icon_right" src="../../assets/img/down_left.png" alt="">
      </template>
    </van-nav-bar>
       <div class="info">
          <!-- <van-field
            label="原密码"
            v-model.trim="user.oldpassword"
            placeholder="请输入原密码" /> -->
            <van-field
            label="新密码"
            type="password"
            v-model.trim="user.newpassword"
            placeholder="请输入新密码" />
            <van-field
            label="确认密码"
            type="password"
            v-model.trim="user.renewpassword"
            placeholder="请再次输入新密码" />
           <button class="btn" @click="changepwd">确认修改</button>
    </div>
  </div>
</template>
<script>
import { changepwd } from '@/api/login'
export default {
  data () {
    return {
      user: {
        // oldpassword: '',
        newpassword: '',
        renewpassword: ''
      }
    }
  },
  methods: {
    async changepwd () {
      // if (!this.user.oldpassword) return this.$toast.fail('密码不能为空')
      if (!this.user.newpassword) return this.$toast.fail('新密码不能为空')
      if (!this.user.renewpassword) return this.$toast.fail('新密码不能为空')
      if (this.user.newpassword !== this.user.renewpassword) return this.$toast.fail('两次输入的新密码不一致')
      const { code, msg } = await changepwd(this.user)
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success('修改密码成功')
      setTimeout(() => {
        this.$router.back()
      }, 1500)
    }
  }
}
</script>
<style scoped lang='less'>
//  顶部导航
.icon_right{
  width: 12px;
  height: 21px;
  vertical-align: middle;
}
.box{
  width: 100%;
  height: 100%;
  background: #F7F8FA;
  overflow: hidden;
  padding-top: 40px;
  .info{
    width: 100%;
    margin-top: 8px;
    /deep/.van-cell{
     line-height: 34px;
     margin-bottom: 6px;
    }
    /deep/.van-cell__title{
      width: 75px;
      font-weight: 600;
    }
  }
}
.btn{
  width: 80%;
  height: 48px;
  margin-top: 40px;
   background: linear-gradient(180deg, #3EB3FF 0%, #436EFF 100%);
   box-shadow: 0px 8px 20px rgba(29, 90, 255, 0.32);
   border-radius: 37px;
   font-size: 16px;
   font-family: PingFang SC;
   font-weight: 600;
   line-height: 22px;
   border: none;
   margin-left: 10%;
   color: #FFFFFF;
}
</style>
